<template>
  <nav class="header">
   
    <router-link  class="topic-tab" :class="{'current-tab':status==item.title}" v-for="item in tab" :key="item.id" :to="{name:'Cnode',query:{'tab':item.title}}" >{{item.name}}</router-link>

  </nav>
</template>
<script>
import { mapState,mapActions } from 'vuex'
const tab=[
    {
        id:0,
        title:'all',
        name:"全部"
    },
    {
        id:1,
        title:'good',
        name:"精华"
    },
    {
        id:2,
        title:'share',
        name:"分享"
    },
    {
        id:3,
        title:'ask',
        name:"问答"
    },
    {
        id:4,
        title:'job',
        name:"招聘"
    },
]
export default {
    data(){
        return {
            tab,
        }
    },
    computed:{
        ...mapState(['status'])
    },
    methods:{
        ...mapActions(['setStatus','setDataList','showContent'])
    }
}
</script>
<style lang="scss" scoped>
.header {
  padding: 10px;
  background-color: #f6f6f6;
  border-radius: 3px 3px 0 0;
  .topic-tab {
    margin: 0 10px;
    color: #80bd01;
    &.current-tab {
      background-color: #80bd01;
      color: #fff;
      padding: 3px 4px;
      border-radius: 3px;
    }
  }
  .router-link-exact-active {
    color: #80bd01;
  }
}
</style>